<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="vue初学习"><meta name="keywords" content="vue"><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>vue初学习 | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E8%87%AA%E5%B7%B1%E5%AF%B9Vue%E5%88%9D%E5%AD%A6%E4%B9%A0%E7%9A%84%E4%B8%80%E4%BA%9B%E7%9F%A5%E8%AF%86%E7%82%B9%E5%92%8C%E7%90%86%E8%A7%A3%EF%BC%8C%E5%9F%BA%E6%9C%AC%E6%97%A0%E7%94%A8"><span class="toc-number">1.</span> <span class="toc-text">关于自己对Vue初学习的一些知识点和理解，基本无用</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-vue%E5%AF%B9%E8%B1%A1%E4%B8%AD%E4%BC%9A%E6%9C%89%E4%B8%A4%E4%B8%AA%E9%87%8D%E8%A6%81%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8Cel%E5%92%8Cdata%EF%BC%8C%E8%A1%A8%E7%A4%BA%E7%BB%91%E5%AE%9A%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%95%B0%E6%8D%AE%E3%80%82"><span class="toc-number">1.1.</span> <span class="toc-text">1.vue对象中会有两个重要的属性，el和data，表示绑定的属性和数据。</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="toc-number">1.2.</span> <span class="toc-text">2.模板语法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8C%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="toc-number">1.3.</span> <span class="toc-text">3.计算属性和侦听器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-class%E5%92%8Cstyle%E7%BB%91%E5%AE%9A"><span class="toc-number">1.4.</span> <span class="toc-text">4.class和style绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93"><span class="toc-number">1.5.</span> <span class="toc-text">5.条件渲染</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93"><span class="toc-number">1.6.</span> <span class="toc-text">6.列表渲染</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-number">1.7.</span> <span class="toc-text">7.事件处理</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8-%E8%A1%A8%E5%8D%95%E8%BE%93%E5%85%A5%E7%BB%91%E5%AE%9A"><span class="toc-number">1.8.</span> <span class="toc-text">8.表单输入绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9-%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">9.组件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.10.</span> <span class="toc-text">10.自定义事件</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vue%E7%9A%84%E9%BB%91%E9%A9%AC%E5%AD%A6%E4%B9%A0%EF%BC%8C%E5%B0%B1%E6%98%AF%E4%B8%80%E4%BA%9B%E7%AE%80%E5%8D%95%E6%8C%87%E4%BB%A4%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.</span> <span class="toc-text">vue的黑马学习，就是一些简单指令的使用</span></a></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">vue初学习</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-07-08</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">2.3k</span><span class="post-meta__separator">|</span><span>阅读时长: 8 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h4 id="关于自己对Vue初学习的一些知识点和理解，基本无用"><a href="#关于自己对Vue初学习的一些知识点和理解，基本无用" class="headerlink" title="关于自己对Vue初学习的一些知识点和理解，基本无用"></a>关于自己对Vue初学习的一些知识点和理解，基本无用</h4><p>学习的地方包括Vue自己的网站，菜鸟教程，B站等。主要是在vue.js里面看的一些知识点，有些不清，需要修改。</p>
<h5 id="1-vue对象中会有两个重要的属性，el和data，表示绑定的属性和数据。"><a href="#1-vue对象中会有两个重要的属性，el和data，表示绑定的属性和数据。" class="headerlink" title="1.vue对象中会有两个重要的属性，el和data，表示绑定的属性和数据。"></a>1.vue对象中会有两个重要的属性，el和data，表示绑定的属性和数据。</h5><h5 id="2-模板语法"><a href="#2-模板语法" class="headerlink" title="2.模板语法"></a>2.模板语法</h5><p>插值：数据绑定：文本：, v-once；原始html：v-html，将html文本转换为html样式；作用于html 的attribute：v-bind,</p>
<p>指令：指令 (Directives) 是带有 <code>v-</code> 前缀的特殊 attribute,一些指令可以带参数。</p>
<p>动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。可以使用null字符串显式的移除此属性。</p>
<p><strong><code>v-bind</code> 指令可以用于响应式地更新 HTML attribute，</strong></p>
<p>**<code>v-on</code> 指令，它用于监听 DOM 事件,**进行事件处理</p>
<h5 id="3-计算属性和侦听器"><a href="#3-计算属性和侦听器" class="headerlink" title="3.计算属性和侦听器"></a>3.计算属性和侦听器</h5><p>​    1.对于任何复杂逻辑，你都应当使用<strong>计算属性</strong>computed。</p>
<p>​    2.我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是<strong>计算属性是基于它们的响应式依赖进行缓存的</strong>。只在相关响应式依赖发生改变时它们才会重新求值。只要值没有发生变化，就不会再次计算属性，直接返回上一次的计算结果。而方法会每一次重新渲染时都重新计算。</p>
<p>​    3.Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：<strong>侦听属性</strong> </p>
<h5 id="4-class和style绑定"><a href="#4-class和style绑定" class="headerlink" title="4.class和style绑定"></a>4.class和style绑定</h5><p>​    1.对象语法，使用v-bind:class指令。</p>
<p>​    2.绑定内联样式，v-bind:style指令。是一个js对象</p>
<h5 id="5-条件渲染"><a href="#5-条件渲染" class="headerlink" title="5.条件渲染"></a>5.条件渲染</h5><p>​    1.v-if条件性的渲染一部分内容，一般使用<template>进行包裹，根据if的条件看是否显示，再使用v-if可以渲染多个内容。还有配套的 v-else,还有v-else-if进行连续使用。</p>
<p>​    2.v-show的使用与v-if差不多，但没有v-else这些。同时因为各自特性，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</p>
<h5 id="6-列表渲染"><a href="#6-列表渲染" class="headerlink" title="6.列表渲染"></a>6.列表渲染</h5><p>​    1.v-for，使用(item,index) in items的格式执行。其中items需要在vue里面的data里指定数据。也可使用value in object进行对象循环，也可使用(value, name, index)进行对象里面的数据，键名，索引访问。也可以使用n in 10进行循环。类似于 <code>v-if</code>，你也可以利用带有 <code>v-for</code> 的 <code>&lt;template&gt;</code> 来循环渲染一段包含多个元素的内容。</p>
<h5 id="7-事件处理"><a href="#7-事件处理" class="headerlink" title="7.事件处理"></a>7.事件处理</h5><p>​    1.v-on监听dom事件，并执行一些js代码。还可以接收一个需要调用的方法名称。在vue的methods里面添加方法。</p>
<p>​    Vue.js 为 <code>v-on</code> 提供了<strong>事件修饰符</strong>。之前提过，修饰符是由点开头的指令后缀来表示的。</p>
<ul>
<li><code>.stop</code></li>
<li><code>.prevent</code></li>
<li><code>.capture</code></li>
<li><code>.self</code></li>
<li><code>.once</code></li>
<li><code>.passive</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;!-- 阻止单击事件继续传播 --&gt;</span><br><span class="line">&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 提交事件不再重载页面 --&gt;</span><br><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 修饰符可以串联 --&gt;</span><br><span class="line">&lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只有修饰符 --&gt;</span><br><span class="line">&lt;form v-on:submit.prevent&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span><br><span class="line">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span><br><span class="line">&lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span><br><span class="line">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span><br><span class="line">&lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 点击事件将只会触发一次 --&gt;</span><br><span class="line">&lt;a v-on:click.once=&quot;doThis&quot;&gt;&lt;/a&gt;</span><br></pre></td></tr></table></figure>

<p>​    使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 <code>v-on:click.prevent.self</code> 会阻止<strong>所有的点击</strong>，而 <code>v-on:click.self.prevent</code> 只会阻止对元素自身的点击。</p>
<p>​    2.监听按键事件时，可以使用按键修饰符，如：v-on:keyup.enter，只有enter键可以触发事件。</p>
<h5 id="8-表单输入绑定"><a href="#8-表单输入绑定" class="headerlink" title="8.表单输入绑定"></a>8.表单输入绑定</h5><p>​    1.v-model，创建双向数据绑定，一处数据发生变化，另一处也会发生变化。</p>
<p>​    <code>v-model</code> 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p>
<ul>
<li>text 和 textarea 元素使用 <code>value</code> property 和 <code>input</code> 事件；</li>
<li>checkbox 和 radio 使用 <code>checked</code> property 和 <code>change</code> 事件；</li>
<li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li>
</ul>
<p>​    2.文本，多行文本，复选框，单选按钮，选择框。</p>
<p>​    3.值绑定</p>
<p>​    4.修饰符，.lazy;.number;.trim</p>
<h5 id="9-组件"><a href="#9-组件" class="headerlink" title="9.组件"></a>9.组件</h5><p>​    1.组件可以扩展 HTML 元素，封装可重用的代码，是可复用的vue实例。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。<strong>每个组件都只有一个根元素</strong></p>
<p>​    2.Vue.component创建组件，第一个参数是组件名称，第二个参数是以对象的实例描述一个组件。通过将组件名作为标签进行调用。<strong>一个组件的 <code>data</code> 选项必须是一个函数</strong>，多个组件的使用，其数据都是分开的，不会互相影响。</p>
<p>​    3.组件需要注册，Vue.component全局注册，先在js里定义组件，再在vue实例中通过component定义想使用的组件局部注册。</p>
<p>​    4.组件里使用prop向子组件传递数据，当做自定义的attribute传递数据。也可使用v-bind动态传递prop，且是单向的。</p>
<p>​    5.监听子组件事件，父级组件可以像处理 native DOM 事件一样通过 <code>v-on</code> 监听子组件实例的任意事件：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;blog-post</span><br><span class="line">  ...</span><br><span class="line">  v-on:enlarge-text=&quot;postFontSize += 0.1&quot;</span><br><span class="line">&gt;&lt;/blog-post&gt;</span><br></pre></td></tr></table></figure>

<p>同时子组件可以通过调用内建的 <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/api/#vm-emit"><strong><code>$emit</code></strong> 方法</a>并传入事件名称来触发一个事件：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;button v-on:click=&quot;$emit(&#x27;enlarge-text&#x27;)&quot;&gt;</span><br><span class="line">  Enlarge text</span><br><span class="line">&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<p>​    6.<slot>内容</slot>，在组件里面通过vue自定义的slot可以实现插槽效果。</p>
<p>​    7.动态组件，通过 Vue 的 <code>&lt;component&gt;</code> 元素加一个特殊的 <code>is</code> attribute 来实现。</p>
<h5 id="10-自定义事件"><a href="#10-自定义事件" class="headerlink" title="10.自定义事件"></a>10.自定义事件</h5><p>​    1.Vue.directive自定义指令，第一个参数是名字，或在vue实例中通过directives局部注册。会有几个钩子函数bind,inserted,update,componentUpdated,unbind.</p>
<p>差不多这篇文章就不想写了，看其他的吧,基本无用。</p>
<h4 id="vue的黑马学习，就是一些简单指令的使用"><a href="#vue的黑马学习，就是一些简单指令的使用" class="headerlink" title="vue的黑马学习，就是一些简单指令的使用"></a>vue的黑马学习，就是一些简单指令的使用</h4><p>1.vue作用范围，只有在vue实例的el挂载点里面及其后代元素才会进行这个vue实例的操作。不仅可以使用id选择器，class选择器也行，使用.class进行el挂载。其他的选择器也都能行。可以使用其他的双标签，但不能是body和html标签。</p>
<p>2.Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时,遵守js的语法即可</p>
<p>3.dom操作是获取元素，操作它们。vue使用指令操作</p>
<p>4.v-text指令。直接替换标签里面的所有文字和数据。跟两个大括号没什么差别。</p>
<p>5.v-html，设置标签的innerHTML，就是将纯html文本解析成html效果。</p>
<p>6.v-on，为元素绑定事件，类似onclick等。v-on:click=”函数名”,函数在vue实例的methods里面定义，methods:{click:function(){ }, other:{ } }。同时，在函数名后面可以传递参数，相应在定义函数时也要添加这个参数。还可以使用(.)表示的指令后缀调用修饰符。如@click.once=””,只会调用一次，@keyup.enter=””这些。</p>
<p>7.v-show,根据表达值的真假，切换元素的显示和隐藏。本质就是切换display属性。</p>
<p>8.v-if,v-if=”值”,根据值的真假，判断是否显示，但不是操纵display，而是直接操纵dom元素。</p>
<p>9.v-bind,设置元素的属性。v-bind:属性名=”属性值”，一般属性值在data里面进行定义。</p>
<p>10.v-for,生成列表。格式v-for=”item in items”，在data里面对items进行数据设置，一般是数组或者对象或者对象数组。使用对象时，可使用(value,key,index) in object 对对象进行数据访问。</p>
<p>11.v-model，获取和设置表单元素的值(进行双向数据绑定)。就是表单中的数据发生改变时，另一个绑定的数据元素也会发生改变。一般用来获取输入文本框中的输入数据.</p>
<p>12.网络请求(axios).一般使用get和post</p>
<p>例如：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">axios.get(<span class="string">&quot;https://autumnfish.cn/api/joke/list?num=1&quot;</span>)</span><br><span class="line">					.then(<span class="function"><span class="keyword">function</span>(<span class="params">response</span>)</span>&#123;</span><br><span class="line">						that.joke=response.data.jokes;<span class="comment">//这里不能通过this访问joke，this的范围已经发生了变化</span></span><br><span class="line">						<span class="built_in">console</span>.log(response.data.jokes);</span><br><span class="line">					&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</span><br><span class="line">						<span class="built_in">console</span>.log(err);</span><br><span class="line">					&#125;)</span><br></pre></td></tr></table></figure>



</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2020/07/08/vue初学习/">https://chengsong.info/2020/07/08/vue初学习/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/vue/">vue</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2020/07/13/vue%E8%BF%9B%E4%B8%80%E6%AD%A5%E5%AD%A6%E4%B9%A0/"><i class="fa fa-chevron-left">  </i><span>vue进一步学习</span></a></div><div class="next-post pull-right"><a href="/2020/07/08/%E7%8C%8E%E5%A5%87%E4%BD%9C%E5%93%81/"><span>猎奇作品(以后有新的会更新)</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>